import { globalStyle, style } from '@vanilla-extract/css';
import { vars } from '../../components/global.css';

export const navMenuStyle = style({
	vars: {
		'--nav-menu-line-height': '3em',
	},
	display: 'flex',
	flexDirection: 'column',
	overflow: 'hidden',
	overflowY: 'auto',
	background: `linear-gradient(${vars.color.menuBackStart},${vars.color.menuBackStop})`,
	color: vars.color.buttonText,
	padding: '0.5em',
});

globalStyle(`${navMenuStyle} div.caption`, {
	display: 'flex',
	alignItems: 'center',
	height: 'var(--nav-menu-line-height)',
	cursor: 'pointer',
	padding: '0 1em',
	fontSize: '1.3em',
	borderRadius: vars.layout.smallRadius,
	fontWeight: 'bold',
	outline: 'none',
	userSelect: 'none',
});

globalStyle(`${navMenuStyle} div.caption:focus-visible`, {
	backgroundColor: vars.color.menuHover,
});

globalStyle(`${navMenuStyle} div.caption:hover`, {
	backgroundColor: vars.color.menuHover,
});

globalStyle(`${navMenuStyle} div.caption.selected`, {
	backgroundColor: vars.color.menuSelected,
});

globalStyle(`${navMenuStyle} div.caption.selected:hover`, {
	backgroundColor: vars.color.menuSelectedHover,
});

globalStyle(`${navMenuStyle}>div.m1>div.caption`, {
	padding: '0 1em',
});

globalStyle(`${navMenuStyle}>div.m1>div.caption>svg.icon`, {
	width: '1em',
	marginRight: '0.5em',
});

globalStyle(`${navMenuStyle}>div.m1>div.caption>svg.arrow`, {
	width: '1.2em',
	marginRight: '-0.5em',
});

globalStyle(`${navMenuStyle}>div.m1>div.caption>span.text`, {
	flex: 1,
});

globalStyle(`${navMenuStyle}>div.m1>div.children>div.caption`, {
	paddingLeft: '4em',
	fontSize: '1em',
	fontWeight: 'normal',
});

globalStyle(`${navMenuStyle} svg`, {
	fill: vars.color.buttonText,
});
